<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
    <div class="hello">
        <div class="helloWrapper">
            <h1>{{ msg }}</h1>
            <div class="card">
                <button type="button" @click="count++">count is {{ count }}</button>
                <button @click="$router.push('/about')">click me</button>
            </div>
        </div>

    </div>

</template>

<style lang="less" scoped>
.hello {
    .helloWrapper {
        width: 320px;
        margin: 100px auto;
    }

    .card {
        text-align: center;

        button:first-child {
            margin-right: 20px;
        }
    }
}
</style>
